<script setup>
const Data = [
  {
    id: 1,
    imgUrl: new URL('@/assets/course/icon1.webp', import.meta.url).href,
    content1: '锻炼孩子的',
    content2: '逻辑思维能力'
  },
  {
    id: 2,
    imgUrl: new URL('@/assets/course/icon2.webp', import.meta.url).href,
    content1: '锻炼孩子的数学思维',
    content2: '及综合学科能力'
  },
  {
    id: 3,
    imgUrl: new URL('@/assets/course/icon3.webp', import.meta.url).href,
    content1: '发展孩子的专注力',
    content2: '解决问题的能力'
  },
  {
    id: 4,
    imgUrl: new URL('@/assets/course/icon4.webp', import.meta.url).href,
    content1: '拥有编程特长孩子助力',
    content2: '孩子助力'
  }
]
</script>
<template>
  <div class="container">
    <el-row class="wrapper" justify="center" style="margin-bottom: 100px">
      <el-col :span="12" class="title">
        <div class="titlt_img"><span>为什么要学编程？</span></div>
        <span class="description">少儿编程时代已经到来</span>
      </el-col>
    </el-row>
    <el-row class="wrapper">
      <el-col :span="6" class="el-col_item" v-for="item in Data" :key="item.id">
        <img :src="item.imgUrl" alt="" />
        <br />
        <span>{{ item.content1 }}</span>
        <span>{{ item.content2 }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.container {
  padding: 50px 0 100px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(249, 252, 255, 1);
  .title {
    width: 397px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: auto ease 0s 1 normal none running none;
    .titlt_img {
      position: relative;
      width: 600px;
      height: 30px;
      background: url('@/assets/course/titlelogo2.webp') no-repeat
        center/contain;
      span {
        position: absolute;
        font-weight: bold;
        font-size: 36px;
        left: 52%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .description {
      margin-top: 20px;
      font-size: 14px;
      color: rgb(178, 178, 178);
      line-height: 48px;
      font-weight: normal;
    }
  }
  .wrapper {
    width: 100%;
    .el-col_item {
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        width: 141px;
        height: 141px;
      }
      span {
        text-align: center;
        line-height: 30px;
        color: rgb(102, 102, 102);
      }
    }
  }
}
</style>
